// pv uv 趋势
$(function() {
    pvUvHistory();
    pvUvLine();
});
// pv uv 曲线图
var myline = echarts.init($('.line')[0]);
function pvUvLine() {
    var option = {
        //鼠标提示工具
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            // 类目类型
            type: 'category',
            // x轴刻度文字
            data: monthBeforeLine[2],
            axisTick: {
                show: false//去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd'//文本颜色
            },
            axisLine: {
                show: false//去除轴线
            },
            boundaryGap: false//去除轴内间距
        },
        yAxis: {
            // 数据作为刻度文字
            type: 'value',
            axisTick: {
                show: false//去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd'//文本颜色
            },
            axisLine: {
                show: false//去除轴线
            },
            boundaryGap: false//去除轴内间距
        },
        //图例组件
        legend: {
            textStyle: {
                color: '#4c9bfd' // 图例文字颜色

            },
            right: '10%'//距离右边10%
        },
        // 设置网格样式
        grid: {
            show: true,// 显示边框
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            borderColor: '#012f4a',// 边框颜色
            containLabel: true // 包含刻度文字在内
        },
        series: [{
            name: '网站PV',
            // 数据
            data: monthBeforeLine[0],
            // 图表类型
            type: 'line',
            // 圆滑连接
            smooth: true,
            itemStyle: {
                color: '#00f2f1'  // 线颜色
            }
        },
            {
                name: '网站UV',
                // 数据
                data: monthBeforeLine[1],
                // 图表类型
                type: 'line',
                // 圆滑连接
                smooth: true,
                itemStyle: {
                    color: '#ed3f35'  // 线颜色
                }
            }]
    };

    myline.setOption(option);

    //点击效果
    var data = {
        month: monthBeforeLine,
        week: weekBeforeLine
    }
    $('.sales ').on('click', '.caption a', function () {
        $(this).addClass('active').siblings('a').removeClass('active');
        //option series   data
        //获取自定义属性值
        var key = $(this).attr('data-type');
        //取出对应的值
        key = data[key];
        //将值设置到 图表中
        option.series[0].data = key[0];
        option.series[1].data = key[1];
        option.xAxis.data = key[2];
        //再次调用才能在页面显示
        myline.setOption(option);
    });
    //定时器
    var index = 0;
    var timer = setInterval(function () {
        index++;
        if (index > 1) {
            index = 0;
        };
        $('.sales .caption a').eq(index).click();
    }, 2000);
}
function pvUvHistory() {
    var data = {
        day30: dayBefore30PvUv,
        day7: dayBefore7PvUv,
        day1: dayBefore1PvUv
    }
    //点击事件
    $('.order').on('click', '.filter a', function () {
        //点击之后加类名
        $(this).addClass('active').siblings().removeClass('active');
        // 先获取点击a的 data-key自定义属性
        var key = $(this).attr('data-key');
        //获取自定义属性
        // data{}==>data.shuxing data['shuxing]
        key = data[key];//
        $('.order .item h4:eq(0)').text(key.pv);
        $('.order .item h4:eq(1)').text(key.uv);
    });
    //定时器
    var index = 0;
    var aclick = $('.order a');
    setInterval(function () {
        index++;
        if (index > 2) {
            index = 0;
        }
        //每san秒调用点击事件
        aclick.eq(index).click();
    }, 3000);
}

// 状态码
var codeEchart = echarts.init($('#httpCode')[0]);
function httpCode(data) {
    for(var i=0;i<data.length;i++) {
        data[i].name = data[i].status;
        data[i].value = data[i].count;
    }

    option = {
        // 控制提示
        tooltip: {
            // 非轴图形，使用item的意思是放到数据对应图形上触发提示
            trigger: 'item',
            // 格式化提示内容：
            // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 控制图表
        series: [
            {
                // 图表名称
                name: '状态',
                // 图表类型
                type: 'pie',
                // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                // 百分比基于  图表DOM容器的半径
                radius: ['10%', '70%'],
                // 图表中心位置 left 50%  top 50% 距离图表DOM容器
                center: ['50%', '50%'],
                // 半径模式，另外一种是 area 面积模式
                roseType: 'radius',
                // 数据集 value 数据的值 name 数据的名称
                data: data,
                //文字调整
                label: {
                    fontSize: 10
                },
                //引导线
                labelLine: {
                    length: 8,
                    length2: 10
                }
            }
        ],
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
    };
    codeEchart.setOption(option);
}


// 移动占比
var mobileEchart = echarts.init($('.gauge')[0]);
function mobileChart(mobileRate) {
    var option = {
        series: [
            {
                type: 'pie',
                radius: ['130%', '150%'],  // 放大图形
                center: ['50%', '80%'],    // 往下移动  套住75%文字
                label: {
                    show: false,
                },
                startAngle: 180,
                hoverOffset: 0,  // 鼠标经过不变大
                data: [
                    {
                        value: mobileRate,
                        itemStyle: { // 颜色渐变#00c9e0->#005fc1
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: '#00c9e0' },
                                    { offset: 1, color: '#005fc1' }
                                ]
                            }
                        }
                    },
                    { value: 200-mobileRate, itemStyle: { color: '#12274d' } }, // 颜色#12274d

                    { value: 200, itemStyle: { color: 'transparent' } }// 透明隐藏第三块区域
                ]
            }
        ]
    };
    mobileEchart.setOption(option);
}

// 路径
var pathEchart = echarts.init($('#path')[0]);
function path(data) {
    var xAxisArray = new Array();
    for(var i=0;i<data.length;i++) {
        xAxisArray.push(data[i].path)
        data[i].name = data[i].path;
        data[i].value = data[i].count;
    }
    option = {
        // 工具提示
        tooltip: {
            // 触发类型  经过轴触发axis  经过轴触发item
            trigger: 'item',
            // 轴触发提示才有效
            axisPointer: {
                // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
                type: 'shadow'
            }
        },
        // 图表边界控制
        grid: {
            // 距离 上右下左 的距离
            left: '0',
            right: '3%',
            bottom: '3%',
            top: '5%',
            // 大小是否包含文本【类似于boxsizing】
            containLabel: true,
            //显示边框
            show: true,
            //边框颜色
            borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        // 控制x轴
        xAxis: [
            {
                // 使用类目，必须有data属性
                type: 'category',
                // 使用 data 中的数据设为刻度文字
                data: xAxisArray,
                // 刻度设置
                axisTick: {
                    // true意思：图形在刻度中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    show: false
                },
                //文字
                axisLabel: {
                    color: '#4c9bfd'
                }
            }
        ],
        // 控制y轴
        yAxis: [
            {
                // 使用数据的值设为刻度文字
                type: 'value',
                axisTick: {
                    // true意思：图形在刻度中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    show: false
                },
                //文字
                axisLabel: {
                    color: '#4c9bfd'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)'
                    }
                },
            }
        ],
        // 控制x轴
        series: [
            {
                // series配置
                // 颜色
                itemStyle: {
                    // 提供的工具函数生成渐变颜色
                    color: new echarts.graphic.LinearGradient(
                        // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#00fffb'}, // 0 起始颜色
                            {offset: 1, color: '#0061ce'}  // 1 结束颜色
                        ]
                    )
                },
                // 图表数据名称
                name: '路径请求数量',
                // 图表类型
                type: 'bar',
                // 柱子宽度
                barWidth: '60%',
                // 数据
                data: data
            }
        ]
    };
    pathEchart.setOption(option);
}

// 获取echarts的容器
var chartMap = echarts.init(document.getElementById("main"));
function worldMap(provinceCityList) {
    var series = [];

    series.push({
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: "stroke", //波纹绘制方式 stroke, fill
            scale: 4
            //波纹圆环最大限制，值越大波纹越大
        },
        label: {
            normal: {
                show: true,
                position: "right", //显示位置
                offset: [5, 0], //偏移设置
                formatter: "{b}" //圆环显示文字
            },
            emphasis: {
                show: true
            }
        },
        symbol: "circle",
        symbolSize: function (val) {
            if(!val) {
                return;
            }
            var  level = 0 ;
            var state= Math.floor(val[2]/1000) ;
            switch (state)
            {
                case 0: level=0; break;
                case 1: level=1; break;
                case 2: level=2; break;
                case 3: level=3; break;
                case 4: level=4; break;
                case 5: level=5; break;
                case 6: level=6; break;
                case 7: level=7; break;
                case 8: level=8; break;
                case 9: level=9; break;
                default: level=10;
            }
            return 5 + level;
        },
        data: provinceCityList.map(function (dataItem) {
            if(geoCoordMap[dataItem.name]) {
                return {
                    name: dataItem.name/*+"\n"+dataItem[0].value*/,
                    value: geoCoordMap[dataItem.name]
                        .concat([dataItem.count])
                };
            }
        })
    });

    option = {
        backgroundColor: '#000',
        //悬浮提示
        tooltip: {
            trigger: "item",
            backgroundColor: "#1540a1",
            borderColor: "#FFFFCC",
            showDelay: 0,
            hideDelay: 0,
            // enterable: true,
            transitionDuration: 0,
            // extraCssText: "z-index:100",formatter
            formatter: function (params, ticket, callback) {
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                var value = params.value[2];
                res = "<span style='color:#fff;'>" + name.toString().split(' ')[0]
                    + "</span><br/>访问次数：" + value;
                return res;
            }
        },
        visualMap: {
            //图例值控制
            min: 0,
            max: 100,
            text:['High','Low'],
            show: false,
            calculable: true,
            splitNumber: 3,
            //color: ["#0bc7f3"],
            color: ['orangered','yellow','lightskyblue']
        },
        geo: {
            map: "world",
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true, //是否允许缩放
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "180%",
            itemStyle: {
                normal: {
                    color: ["#04284e"], //地图背景色
                    //color: ['orangered','yellow','lightskyblue']
                    borderColor: "#5bc1c9" //省市边界线
                },
                emphasis: {
                    color: "rgba(37, 43, 61, .5)" //悬浮背景
                }
            }
        },
        series: series
    };
    chartMap.setOption(option);
}

function jsonToArray(json) {
    var array = new Array();
    for(var item in json){
        array.push({"name":item,"value":json[item]})
    }
    return array;
}

// json key
function getJsonKey(json) {
    var array = new Array();
    for(var item in json){
        array.push(item)
    }
    return array;
}